<template>
  <div style="
      width: 620px;
      height: 430px;
      background-color: #ffffff;
      position: fixed;
      bottom: 0px;
      right: 0px;
      box-shadow: 3px 2px 10px #dedede;
      display: flex;
      z-index: 99999;
    " v-if="chatestate">
    <!-- 聊天框 -->
    <div style="display: flex; flex-direction: column; width: 380px">
      <!-- 标题 -->
      <div style="
          display: flex;
          justify-content: space-between;
          color: black;
          padding: 10px;
          align-items: center;
        ">
        <div style="
            width: 10px;
            height: 10px;
            border-radius: 10px;
            background-color: #0b9ade;
          "></div>
        <div style="flex-grow: 1; padding: 0 10px" v-for="(item, index) in chatUserList" :key="index"
          v-if="item.receiver == chatPage.receiver">
          {{ item.nikeName || "未命名用户" }}
        </div>
        <p style="font-size: 20px; cursor: pointer" class="el-icon-close" @click="chatClose()"></p>
      </div>
      <!-- 聊天内容 -->
      <!-- @mousewheel -->
      <div style="
          height: 270px;
          background-color: #f3f3f3;
          overflow-y: scroll;
          overscroll-behavior: contain;
        " id="scoo" @mousewheel="scrollBarWheel" @scroll="scroll">
        <!-- <template v-for="(item,index) in chatList" :key="index"></template> -->
        <template v-for="(item, index) in chatList">
          <template v-if="item.usertype != 1">
            <!-- 对方回复(文字) -->
            <template v-if="item.contentType == 1">
              <div style="display: flex; margin: 20px">
                <img @click="goHouse('/index/goldConsultant', buser.id)" :src="buser.image
                  ? buser.image
                  : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                  " style="width: 34px; height: 34px; border-radius: 34px" />
                <div style="
                    max-width: 260px;
                    background-color: #ffffff;
                    margin-left: 10px;
                    color: black;
                    word-wrap: break-word;
                    padding: 5px;
                    border-radius: 5px;
                  " v-html="item.content"></div>
              </div>
            </template>
            <!-- 对方回复(图片) -->
            <template v-else-if="item.contentType == 2">
              <div style="margin: 20px; display: flex">
                <img @click="goHouse('/index/goldConsultant', buser.id)" :src="buser.image
                  ? buser.image
                  : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                  " style="width: 34px; height: 34px; border-radius: 34px" />
                <div v-html="item.content"></div>
              </div>
            </template>
            <!-- 发送的房源 -->
            <template v-else-if="item.contentType == 3">
              <template v-if="item.characteristicData == 1">
                <div style="display: flex; margin: 20px">
                  <img @click="goHouse('/index/goldConsultant', buser.id)" :src="buser.image
                    ? buser.image
                    : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                    " style="width: 34px; height: 34px; border-radius: 34px" />
                  <div class="information" @click.stop="
                    goHouse(item.content.detailsPath, item.content.id)
                    ">
                    <img :src="item.content.displayDiagram
                      ? item.content.displayDiagram
                      : item.content.houseImage.split('|')[0]
                      " />
                    <div class="li_1" style="max-width: 134px">
                      <div class="tit">{{ item.content.title }}</div>
                      <div class="jiedao">
                        {{ item.content.region }}
                        {{ item.content.cellName || "" }}
                        {{ item.content.floor || "" }}
                      </div>
                      <div class="shijian line1">
                        <span style="
                            margin-right: 10px;
                            color: red;
                            font-size: 16px;
                            font-weight: 600;
                          " v-if="item.content.transactionType == 2">{{ item.content.price }}万</span>
                        <span style="
                            margin-right: 10px;
                            color: red;
                            font-size: 16px;
                            font-weight: 600;
                          " v-if="item.content.transactionType == 1 &&
                            item.content.price <= 10000
                            ">{{ item.content.price }}元</span>
                        <span style="
                            margin-right: 10px;
                            color: red;
                            font-size: 16px;
                            font-weight: 600;
                          " v-if="item.content.transactionType == 1 &&
                            item.content.price > 10000
                            ">{{ item.content.price / 10000 }}万元</span>
                        <span style>{{ item.content.AREA || item.content.area }}㎡</span>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <template v-if="item.characteristicData == 2">
                <div style="display: flex; margin: 20px">
                  <img @click="goHouse('/index/goldConsultant', buser.id)" :src="buser.image
                    ? buser.image
                    : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                    " style="width: 34px; height: 34px; border-radius: 34px" />
                  <div class="information" @click.stop="
                    goHouse(item.content.detailsPath, item.content.id)
                    ">
                    <img :src="item.content.vehicleCoverPicture
                      ? item.content.vehicleCoverPicture
                      : item.content.vehicleCoverPicture
                      " />
                    <div class="li_1" style="max-width: 134px">
                      <div class="li-cz line3">
                        <div class="tit line2">
                          {{
                            item.content.vehicleBrandModel
                            ? (item.content.vehicleBrandModel.split("|")[0] ||
                              "") +
                            " " +
                            (item.content.vehicleBrandModel.split("|")[1] ||
                              "")
                            : ""
                          }}
                          {{
                            item.content.model ? item.content.model + "/" : ""
                          }}
                          {{
                            item.content.bodyStructureDoors +
                            "门" +
                            item.content.bodyStructureSeat +
                            "座" +
                            item.content.bodyStructureVehicle +
                            "车"
                          }}
                        </div>
                        <div class="shijian line1">
                          <span style="
                              margin-right: 10px;
                              color: red;
                              font-size: 16px;
                              font-weight: 600;
                            ">
                            {{
                              item.content.intervalPrice &&
                              item.content.intervalPrice != ""
                              ? item.content.intervalPrice.indexOf("-") > -1
                                ? item.content.intervalPrice.split("-")[0] +
                                "万-" +
                                item.content.intervalPrice.split("-")[1] +
                                "万"
                                : ""
                              : item.content.price
                                ? item.content.price + "万"
                                : ""
                            }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <!-- 服务项目 -->
              <template v-if="item.characteristicData == 3">
                <div style="display: flex; margin: 20px">
                  <img @click="goHouse('/index/goldConsultant', buser.id)" :src="buser.image
                    ? buser.image
                    : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                    " style="width: 34px; height: 34px; border-radius: 34px" />
                  <div class="information" @click.stop="
                    goHouse(item.content.detailsPath, item.content.id)
                    ">
                    <img :src="item.content.coverPhoto
                      ? item.content.coverPhoto
                      : item.content.coverPhoto
                      " />
                    <div class="li_1" style="max-width: 134px">
                      <div class="li-cz line3">
                        <div class="tit line1">
                          {{ item.content.entryName }}
                        </div>
                        <div class="jiedao line2">
                          {{ item.content.entryDescription }}
                        </div>
                        <div class="shijian line1">
                          <span style="
                              margin-right: 10px;
                              color: #3ea3e2;
                              font-size: 14px;
                              font-weight: 600;
                              border: 1px solid #3ea3e2;
                              padding: 1px 3px;
                              border-radius: 4px;
                            ">
                            {{
                              item.serviceType == "1" ? "美容装饰" : "维修保养"
                            }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
              <template v-if="item.characteristicData == 4">
                <div style="display: flex; margin: 20px">
                  <img @click="goHouse('/index/goldConsultant', user.id)" :src="user.image
                    ? user.image
                    : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                    " style="width: 34px; height: 34px; border-radius: 34px" />
                  <div class="vacancy" @click.stop="
                    goHouse(item.content.detailsPath, item.content.id)
                    ">
                    <div class="vehicleRecom">
                      <span>{{ item.content.title }}</span>
                    </div>
                    <div class="vacancy_center">
                      <div class="vacancy_status">
                        <span>{{ item.content.region }}</span>
                        <span>{{ item.content.positionCategory }}</span>
                      </div>
                      <div class="vacancy_price" v-if="item.content.recruitmentType == 1">
                        {{
                          item.content.salaryRange == "面议"
                          ? "面议"
                          : item.content.salaryRange + "元"
                        }}
                      </div>
                      <div class="vacancy_price" v-else>
                        {{
                          item.content.salaryRange.split(",").join("")
                        }}&emsp;{{ item.content.settlementMethod }}
                      </div>
                    </div>
                    <div class="vacancy_biaoq" v-if="item.content.fringeBenefits">
                      <div class="vacancy_label">
                        <div class="shade"></div>
                        <div class="label" v-for="(i, j) in item.content.fringeBenefits.split(
                          ','
                        )" :key="j">
                          {{ i }}
                        </div>
                      </div>
                      <div class="gend" v-if="item.content.fringeBenefits.split(',').length > 4">
                        更多>
                      </div>
                    </div>
                    <div class="personalInformation">
                      <div class="personalInformation_left">
                        <div class="GR">
                          <img class="personalInformation_image" v-if="item.content.userInformationDto.image"
                            :src="item.content.userInformationDto.image" mode="" />
                          <img class="personalInformation_image" v-else
                            src="https://pic.bangbangtongcheng.com/static/my/header.png" mode="" />
                          <span class="name">{{
                            item.content.userInformationDto.nikeName
                            ? item.content.userInformationDto.nikeName
                            : "未命名用户"
                          }}</span>
                        </div>
                        <div class="GS" v-if="item.content.userInformationDto
                              .enterpriseRecruitmentStatus
                            ">
                          <div class="personalInformation_image"></div>
                          <span class="corporation">{{
                            item.content.enterpriseName
                          }}</span>
                        </div>
                      </div>
                      <div class="personalInformation_right">
                        <span class="personalInformation_Time">{{
                          $time.getDateDiff(item.content.createDate)
                        }}</span>
                        <span class="personalInformation_distance" v-if="item.content.distance">{{ item.content.distance
                        }}km</span>
                      </div>
                    </div>
                  </div>
                </div>
              </template>
            </template>
          </template>
          <!-- 自己发送 -->
          <template v-else>
            <template v-if="item.contentType == 1">
              <div style="display: flex; margin: 20px; justify-content: flex-end">
                <div style="
                    max-width: 260px;
                    background-color: #4285f4;
                    margin-right: 10px;
                    color: #ffffff;
                    padding: 5px;
                    border-radius: 5px;
                    display: inline-block;
                    word-wrap: break-word;
                  " v-html="item.content"></div>
                <img @click="goHouse('/index/goldConsultant', user.id)" :src="user.image
                  ? user.image
                  : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                  " style="width: 34px; height: 34px; border-radius: 34px" />
              </div>
            </template>
            <template v-else-if="item.contentType == 2">
              <div style="margin: 20px; display: flex; justify-content: flex-end">
                <div v-html="item.content"></div>
                <img @click="goHouse('/index/goldConsultant', user.id)" :src="user.image
                  ? user.image
                  : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                  " style="width: 34px; height: 34px; border-radius: 34px" />
              </div>
            </template>
            <template v-else-if="item.contentType == 3">
              <template v-if="item.characteristicData == 1">
                <div style="display: flex; margin: 20px; justify-content: flex-end" class="sss">
                  <div class="information" @click.stop="
                    goHouse(item.content.detailsPath, item.content.id)
                    ">
                    <img :src="item.content.displayDiagram
                      ? item.content.displayDiagram
                      : item.content.houseImage.split('|')[0]
                      " />
                    <div class="li_1" style="max-width: 134px">
                      <div class="tit">{{ item.content.title }}</div>
                      <div class="jiedao">
                        {{ item.content.region }}
                        {{ item.content.cellName || "" }}
                        {{ item.content.floor || "" }}
                      </div>
                      <div class="shijian line1">
                        <span style="
                            margin-right: 10px;
                            color: red;
                            font-size: 16px;
                            font-weight: 600;
                          " v-if="item.content.transactionType == 2">{{ item.content.price }}万</span>
                        <span style="
                            margin-right: 10px;
                            color: red;
                            font-size: 16px;
                            font-weight: 600;
                          " v-if="item.content.transactionType == 1 &&
                            item.content.price <= 10000
                            ">{{ item.content.price }}元</span>
                        <span style="
                            margin-right: 10px;
                            color: red;
                            font-size: 16px;
                            font-weight: 600;
                          " v-if="item.content.transactionType == 1 &&
                            item.content.price > 10000
                            ">{{ item.content.price / 10000 }}万元</span>
                        <span style>{{ item.content.AREA || item.content.area }}㎡</span>
                      </div>
                    </div>
                  </div>
                  <img @click="goHouse('/index/goldConsultant', user.id)" :src="user.image
                    ? user.image
                    : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                    " style="width: 34px; height: 34px; border-radius: 34px" />
                </div>
              </template>
              <template v-if="item.characteristicData == 2">
                <div style="display: flex; margin: 20px; justify-content: flex-end" class="sss">
                  <div class="information" @click.stop="
                    goHouse(item.content.detailsPath, item.content.id)
                    ">
                    <img :src="item.content.vehicleCoverPicture
                      ? item.content.vehicleCoverPicture
                      : item.content.vehicleCoverPicture
                      " />
                    <div class="li_1" style="max-width: 134px">
                      <div class="li-cz">
                        <div class="tit line2">
                          {{
                            item.content.vehicleBrandModel
                            ? (item.content.vehicleBrandModel.split("|")[0] ||
                              "") +
                            " " +
                            (item.content.vehicleBrandModel.split("|")[1] ||
                              "")
                            : ""
                          }}
                          {{
                            item.content.model ? item.content.model + "/" : ""
                          }}
                          {{
                            item.content.bodyStructureDoors +
                            "门" +
                            item.content.bodyStructureSeat +
                            "座" +
                            item.content.bodyStructureVehicle +
                            "车"
                          }}
                        </div>
                        <div class="shijian line1">
                          <span style="
                              margin-right: 10px;
                              color: red;
                              font-size: 16px;
                              font-weight: 600;
                            ">
                            {{
                              item.content.intervalPrice &&
                              item.content.intervalPrice != ""
                              ? item.content.intervalPrice.indexOf("-") > -1
                                ? item.content.intervalPrice.split("-")[0] +
                                "万-" +
                                item.content.intervalPrice.split("-")[1] +
                                "万"
                                : ""
                              : item.content.price
                                ? item.content.price + "万"
                                : ""
                            }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <img @click="goHouse('/index/goldConsultant', user.id)" :src="user.image
                          ? user.image
                          : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                        " style="width: 34px; height: 34px; border-radius: 34px" />
                </div>
              </template>
              <template v-if="item.characteristicData == 3">
                <div style="display: flex; margin: 20px; justify-content: flex-end" class="sss">
                  <div class="information" @click.stop="
                    goHouse(item.content.detailsPath, item.content.id)
                    ">
                    <img :src="item.content.coverPhoto
                      ? item.content.coverPhoto
                      : item.content.coverPhoto
                      " />
                    <div class="li_1" style="max-width: 134px">
                      <div class="li-cz">
                        <div class="tit line1">
                          {{ item.content.entryName }}
                        </div>
                        <div class="jiedao line2">
                          {{ item.content.entryDescription }}
                        </div>
                        <div class="shijian line1">
                          <span style="
                              margin-right: 10px;
                              color: #3ea3e2;
                              font-size: 14px;
                              font-weight: 600;
                              border: 1px solid #3ea3e2;
                              padding: 1px 3px;
                              border-radius: 4px;
                            ">
                            {{
                              item.serviceType == "1" ? "美容装饰" : "维修保养"
                            }}
                          </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <img @click="goHouse('/index/goldConsultant', user.id)" :src="user.image
                      ? user.image
                      : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                    " style="width: 34px; height: 34px; border-radius: 34px" />
                </div>
              </template>
              <template v-if="item.characteristicData == 4">
                <div style="display: flex; margin: 20px">
                  <div class="vacancy" @click.stop="
                    goHouse(item.content.detailsPath, item.content.id)
                    ">
                    <div class="vehicleRecom">
                      <span>{{ item.content.title }}</span>
                    </div>
                    <div class="vacancy_center">
                      <div class="vacancy_status">
                        <span>{{ item.content.region }}</span>
                        <span>{{ item.content.positionCategory }}</span>
                      </div>
                      <div class="vacancy_price" v-if="item.content.recruitmentType == 1">
                        {{
                          item.content.salaryRange == "面议"
                          ? "面议"
                          : item.content.salaryRange + "元"
                        }}
                      </div>
                      <div class="vacancy_price" v-else>
                        {{
                          item.content.salaryRange.split(",").join("")
                        }}&emsp;{{ item.content.settlementMethod }}
                      </div>
                    </div>
                    <div class="vacancy_biaoq" v-if="item.content.fringeBenefits">
                      <div class="vacancy_label">
                        <div class="shade"></div>
                        <div class="label" v-for="(i, j) in item.content.fringeBenefits.split(
                          ','
                        )" :key="j">
                          {{ i }}
                        </div>
                      </div>
                      <div class="gend" v-if="item.content.fringeBenefits.split(',').length > 4">
                        更多>
                      </div>
                    </div>
                    <div class="personalInformation">
                      <div class="personalInformation_left">
                        <div class="GR">
                          <img class="personalInformation_image" v-if="item.content.userInformationDto.image"
                            :src="item.content.userInformationDto.image" mode="" />
                          <img class="personalInformation_image" v-else
                            src="https://pic.bangbangtongcheng.com/static/my/header.png" mode="" />
                          <span class="name">{{
                            item.content.userInformationDto.nikeName
                            ? item.content.userInformationDto.nikeName
                            : "未命名用户"
                          }}</span>
                        </div>
                        <div class="GS" v-if="item.content.userInformationDto
                              .enterpriseRecruitmentStatus
                            ">
                          <div class="personalInformation_image"></div>
                          <span class="corporation">{{
                            item.content.enterpriseName
                          }}</span>
                        </div>
                      </div>
                      <div class="personalInformation_right">
                        <span class="personalInformation_Time">{{
                          $time.getDateDiff(item.content.createDate)
                        }}</span>
                        <span class="personalInformation_distance" v-if="item.content.distance">{{ item.content.distance
                        }}km</span>
                      </div>
                    </div>
                  </div>
                  <img @click="goHouse('/index/goldConsultant', user.id)" :src="user.image
                      ? user.image
                      : 'https://pic.bangbangtongcheng.com/static/my/header.png'
                    " style="width: 34px; height: 34px; border-radius: 34px" />
                </div>
              </template>
            </template>
          </template>
        </template>
      </div>
      <!-- 输入框 -->
      <div style="
          padding: 10px;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
        ">
        <el-input type="textarea" :rows="2" placeholder="点击输入想要咨询的内容" v-model="textarea" @keyup.enter.native="send">
        </el-input>
        <el-button style="margin-top: 10px" type="primary" size="mini" @click="send()">发送</el-button>

        <el-upload :action="$upLoad" :on-success="handleSuccess" :before-upload="beforeUpload"
          accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf,.JPG,.JPEG,.PBG,.GIF,.BMP" :show-file-list="false">
          <p class="el-icon-picture-outline" style="
              color: coral;
              position: relative;
              top: -64px;
              font-size: 26px;
              cursor: pointer;
            "></p>
        </el-upload>
      </div>
    </div>
    <!-- 聊天列表 -->
    <div style="display: flex; flex-direction: column; width: 240px">
      <!-- 标题 -->
      <div style="
          display: flex;
          color: black;
          align-items: center;
          justify-content: space-between;
          padding: 10px;
          border-bottom: 1px darkgrey solid;
        ">
        <p style="font-size: 20px" class="el-icon-headset"></p>
        <div style="flex-grow: 1; padding: 0 10px">在线咨询</div>
        <!-- <p style="font-size: 20px;" class="el-icon-arrow-down"></p> -->
      </div>
      <!-- 聊天列表 -->
      <div style="display: flex; flex-direction: column; overflow-y: scroll">
        <!-- 用户 -->
        <div v-if="chatUserList.length > 0" v-for="(item, index) in chatUserList" :key="index"
          @click="startChat(item.sender, item.receiver, item)" style="
            display: flex;
            margin: 0 10px;
            border-bottom: #f3f3f3 1px solid;
            padding: 10px 0;
            cursor: pointer;
          ">
          <img src="https://pic.bangbangtongcheng.com/static/my/header.png"
            style="width: 40px; height: 40px; border-radius: 40px" v-if="!item.image" />
          <img :src="item.image
            ? item.image
            : 'https://pic.bangbangtongcheng.com/static/my/header.png'
            " style="width: 40px; height: 40px; border-radius: 40px" v-else />
          <div style="
              display: flex;
              flex-direction: column;
              color: black;
              margin-left: 10px;
              justify-content: space-between;
            ">
            <div style="font-size: 14px; font-weight: bold">
              {{ item.nikeName || "未命名用户" }}
            </div>
            <div style="font-size: 12px" v-html="item.chatRecord.chatRecord[0].content"
              v-if="item.chatRecord.chatRecord.length > 0"></div>
          </div>
        </div>
        <div style="
            display: flex;
            flex-direction: column;
            color: black;
            align-items: center;
            justify-content: center;
            height: 300px;
          " v-else>
          <p style="font-size: 100px" class="el-icon-s-custom"></p>
          <div>没有聊过的经纪人</div>
        </div>
      </div>
    </div>
    <el-dialog> </el-dialog>
  </div>
</template>

<script>
import util from "../utils/util.js";
export default {
  name: "chat",
  data() {
    return {
      textarea: "",
      t1: "1222222122222222226561165",
      socket: null,
      img: "/userfiles/1/程序附件//tbannerconfig/tBannerConfig/2022/2/845465.jpg",
      contentType: 1,
      loginstate: false,
      user: {},
      chatestate: false,
      chatUserList: [], //聊天列表
      chatList: [], //用户聊天历史记录
      chatPage: {
        pageNo: 1,
        pageSize: 50,
        receiver: "",
        sender: "",
      },
      bid: "",
      buser: {},
      record: true,
      articleId: "",
      HousData: {
        houseImage: "",
      },
      loding: false,
      detailsId: "",
      detailsPath: "",
      chatType: 1,
    };
  },
  mounted() {
    document.body.addEventListener(
      "scroll",
      function (e) {
        e.preventDefault();
        e.stopPropagation();
      },
      { passive: false }
    );
  },
  beforeDestroy() {
    this.chatClose()
  },
  methods: {
    zpdetails() { },
    beforeUpload(file) { },
    // 跳转
    goHouse(path, id) {
      // console.log("object");
      // console.log("object",path);
      // console.log("object",id);

      // this.openUrl({
      // 	path:path,
      // 	query:{
      // 		id:id
      // 	}
      // })
      const routeData = this.$router.resolve({
        path: path,
        query: {
          id: id,
        },
      });
      window.open(routeData.href, "_blank");
    },
    // 滑轮滚动
    scrollBarWheel(e) {
      e = e || window.event;
      if (e.wheelDelta) {
        //判断浏览器IE，谷歌滑轮事件
        if (e.wheelDelta > 0) {
          //当滑轮向上滚动时
          console.log("向上滚动");
        }
        if (e.wheelDelta < 0) {
          console.log("向下滚动");
        }
      } else if (e.detail) {
        //Firefox滑轮事件
        if (e.detail > 0) {
          //当滑轮向上滚动时
          console.log("向上滚动");
        }
        if (e.detail < 0) {
          console.log("向下滚动");
        }
      }
      // e.preventDefault()
      console.log(e);
    },
    async getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        //this.chatestate = true
        this.user = user;
        await this.getChatUser();
        this.init();
      } else {
        //this.chatestate = false
        this.loginstate = false;
      }
    },
    //查询聊天列表
    getChatUser() {
      return this.$getHttp("/mob/chatrecord/getChatUser", {
        userId: this.user.id,
      }).then((data) => {
        if (data.code == 200) {
          data.data.list.forEach((e) => {
            if (e.chatRecord.chatRecord.length > 0) {
              console.log(e.chatRecord.chatRecord[0].content, 11);
              if (
                e.chatRecord.chatRecord[0].content.search("sendIamge") != -1
              ) {
                e.chatRecord.chatRecord[0].content = "[图片]";
              } else if (
                e.chatRecord.chatRecord[0].content.search(
                  "characteristicData"
                ) != -1
              ) {
                if (
                  JSON.parse(e.chatRecord.chatRecord[0].content)
                    .characteristicData == 1
                ) {
                  // this.chatType = 1
                  e.chatRecord.chatRecord[0].content = "[房源]";
                } else if (
                  JSON.parse(e.chatRecord.chatRecord[0].content)
                    .characteristicData == 2
                ) {
                  // this.chatType = 2
                  e.chatRecord.chatRecord[0].content = "[车源]";
                } else if (
                  JSON.parse(e.chatRecord.chatRecord[0].content)
                    .characteristicData == 3
                ) {
                  // this.chatType = 2
                  e.chatRecord.chatRecord[0].content = "[车源]";
                } else if (
                  JSON.parse(e.chatRecord.chatRecord[0].content)
                    .characteristicData == 4
                ) {
                  // this.chatType = 2
                  e.chatRecord.chatRecord[0].content = "[招聘]";
                }
                // console.log('e.chatRecord.chatRecord[0].content.characteristicData',e.chatRecord.chatRecord[0].content.characteristicData);
                // e.chatRecord.chatRecord[0].content = '[车源]'
              }
            }

            // console.log(JSON.stringify(e.chatRecord,null,2));
          });
          this.chatUserList = data.data.list;
        }
      });
    },
    //查询跟用户的聊天记录
    getChatRecordList() {
      let that = this;
      this.$getHttp("/mob/chatrecord/getChatRecordList", this.chatPage).then(
        (data) => {
          if (data.code == 200) {
            let list = data.data.list.reverse();
            list.forEach((el) => {
              if (el.content) {
                if (el.content.search("sendIamge") != -1) {
                  el.contentType = "2";
                } else if (el.content.search("characteristicData") != -1) {
                  el.content = JSON.parse(el.content);
                  if (
                    el.content.characteristicData == 1 ||
                    !el.content.characteristicData
                  ) {
                    el.characteristicData = 1;
                  } else if (el.content.characteristicData == 2) {
                    el.characteristicData = 2;
                  } else if (el.content.characteristicData == 3) {
                    el.characteristicData = 3;
                  } else if (el.content.characteristicData == 4) {
                    el.characteristicData = 4;
                  } else if (el.content.characteristicData == 5) {
                    el.characteristicData = 5;
                  }
                  el.contentType = "3";
                } else {
                  el.contentType = "1";
                }
              }
              this.chatList.unshift(el);
            });
            var div = document.getElementById("scoo");
            setTimeout(function () {
              div.scrollTop = 9999;
            }, 100);
          }
        }
      );
    },
    scroll(e) {
      if (this.record) {
        let scrolltop = e.srcElement.scrollTop;
        if (scrolltop < 10) {
        }
      }
    },
    chatOpne(id, articleId, index) {
      this.chatType = localStorage.getItem("chatType") || 1;
      console.log("chatType", this.chatType);

      localStorage.removeItem("chatType");

      if (articleId && articleId != undefined && index == 1) {
        this.articleId = articleId;
        this.loding = true;
        // this.getUser()
      }
      if (id) {
        // console.log("idddddddddd",this.$route.path);
        console.log("idddddddddd", id);
        console.log("idddddddddd", articleId, 3, 1);

        this.bid = String(id);
        this.chatestate = true;
        this.chatPage.pageNo = 1;
        this.getUser();
        this.chatPage.sender = JSON.parse(localStorage.getItem("userInfo")).id;
        this.chatPage.receiver = id;
        this.chatList = [];
        this.getChatRecordList();
      } else {
        // this.bid = id
        // console.log("idddddddddd");
        this.chatestate = true;
        this.chatPage.pageNo = 1;
        this.getUser();
        this.chatPage.sender = JSON.parse(localStorage.getItem("userInfo")).id;
        this.chatPage.receiver = id;
        this.chatList = [];
        // this.getChatRecordList()
      }
    },
    chatClose() {
      this.timeoutObj && clearInterval(this.timeoutObj);
      this.socket && this.socket.close();

      setTimeout(() => {
        this.chatestate = false;

      })
    },
    init() {
      if (this.loginstate) {
        if (typeof WebSocket === "undefined") {
          alert("您的浏览器不支持在线聊天");
        } else {
          let _this = this;
          var heartCheck = {
            timeout: 5000,
            timeoutObj: null,
            reset: function () {
              clearInterval(_this.timeoutObj);
              return this;
            },
            start: function () {
              _this.timeoutObj = setInterval(function () {
                _this.socket.send("heartbeat");
                //console.log("给服务器发送:heartbeat")
              }, this.timeout);
            },
          };
          //conven.lefenglian.top/conven/
          // www.bangbangtongcheng.com/conven/
          var url = "www.bangbangtongcheng.com/conven/webSocket/";
          // var url = "ws.weisou.online/conven/webSocket/"
          // var url = "192.168.0.112:8083/conven/webSocket/"
          _this.socket = new WebSocket(
            "wss://" + url + JSON.parse(localStorage.getItem("userInfo")).id
          );
          _this.socket.onopen = function () {
            console.log("连接成功");
            heartCheck.reset().start();
            if (_this.articleId != "" && _this.loding) {
              _this.loding = false;
              _this.sendData();
            }
          };
          _this.socket.onmessage = function (event) {
            console.log("接收到服务器消息：" + event.data);
            var tempData = event.data;
            if (event.data == "heartbeat") {
              heartCheck.reset().start();
              return;
            }

            let contentType = "1";
            if (event.data.search("sendIamge") != -1) {
              contentType = "2";
            } else if (event.data.search("characteristicData") != -1) {
              tempData = JSON.parse(event.data);
              if (
                tempData.characteristicData == 1 ||
                !tempData.characteristicData
              ) {
                // this.chatType = 1
              } else if (tempData.characteristicData == 2) {
                // this.chatType = 2
              }
              contentType = "3";
            } else {
              contentType = "1";
            }
            _this.chatList.push({
              usertype: 2,
              time: util.formatDate.format(new Date(), "yyyy-MM-dd hh:mm:ss"),
              name: _this.user.nikeName || "未命名用户",
              content: tempData,
              rendImage: _this.user.image,
              contentType: contentType,
              characteristicData: tempData.characteristicData || 1,
            });
            var div = document.getElementById("scoo");
            clearTimeout(time);
            var time = setTimeout(function () {
              div.scrollTop = 9999;
              clearTimeout(time);
            }, 100);
          };
        }
      } else {
        this.$message({
          message: "请先登录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      }
    },
    send() {
      // 如果没有选择发送人就不能发送
      if (this.chatPage.receiver == "undefined" || !this.chatPage.receiver) {
        this.$message({
          message: "请选择聊天对象！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return;
      }

      //发送消息
      var _this = this;
      let text = this.textarea != "" ? this.textarea.trim() : "";

      if (text == "") {
        this.$message({
          message: "请输入内容！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      } else {

        console.log('_this.bid_this.bid', _this.bid)
        _this.chatList.push({
          usertype: 1,
          time: util.formatDate.format(new Date(), "yyyy-MM-dd hh:mm:ss"),
          name: _this.user.nikeName ? _this.user.nikeName : "未命名用户",
          content: text,
          rendImage: _this.user.image ? _this.user.image : "../assets/toux.png",
          contentType: 1,
        });
        let sendText = {
          sender: _this.user.id,
          receiver: String(_this.bid),
          content: text,
        };
        _this.socket.send(JSON.stringify(sendText));
        this.textarea = "";
        var div = document.getElementById("scoo");
        clearTimeout(time);
        var time = setTimeout(function () {
          div.scrollTop = 9999;
          clearTimeout(time);
        }, 100);
      }

      this.getChatUser();
    },
    // close: function (){
    // 	this.wsHeartflag = false
    // 	console.log("socket关闭")
    // },
    //点击列表的用户发起聊天发送人id 接收人id
    startChat(id, bid, item) {
      console.log(item);
      this.chatPage.pageNo = 1;
      this.chatPage.sender = id;
      this.chatPage.receiver = bid;
      this.bid = bid;
      this.chatList = [];
      this.socket.close();
      this.chatUserList.forEach((e) => {
        if (e.receiver == bid) {
          console.log(e, "对方");
          this.buser = e;
        }
      });
      this.init();
      this.getChatRecordList();
    },
    //发送图片成功
    handleSuccess(response, file, fileList) {
      //发送图片成功 往数组push图片显示
      let img =
        `<img class="sendIamge" style="width:100%" src=` +
        response.data[0].url +
        `></img>`;
      this.chatList.push({
        usertype: 1,
        time: util.formatDate.format(new Date(), "yyyy-MM-dd hh:mm:ss"),
        name: this.user.nikeName ? this.user.nikeName : "未命名用户",
        //   content: this.textarea,
        content: img,
        rendImage: this.user.image ? this.user.image : "../assets/toux.png",
        contentType: 2,
      });
      let sendText = {
        sender: this.user.id,
        receiver: this.bid,
        content: img,
      };
      console.log("sendText", sendText);
      this.socket.send(JSON.stringify(sendText));
      var div = document.getElementById("scoo");
      clearTimeout(time);
      var time = setTimeout(function () {
        div.scrollTop = 9999;
        clearTimeout(time);
      }, 100);
    },
    // 发送商品数据成功
    async sendData() {
      console.log("发送商品数据成功");
      let _this = this;
      if (!this.chatType || this.chatType == 1) {
        await this.obtainData(this.articleId);
      } else if (this.chatType == 2) {
        await this.obtainData2(this.articleId);
      } else if (this.chatType == 3) {
        await this.obtainData3(this.articleId);
      } else if (this.chatType == 4) {
        await this.obtainData4(this.articleId);
      }

      let data = this.HousData;
      console.log(data);
      data.characteristicData = this.chatType || 1;
      data.detailsPath = this.$route.path;
      this.chatList.push({
        usertype: 1,
        time: util.formatDate.format(new Date(), "yyyy-MM-dd hh:mm:ss"),
        name: this.user.nikeName ? this.user.nikeName : "未命名用户",
        content: data,
        rendImage: this.user.image ? this.user.image : "../assets/toux.png",
        contentType: 3,
        characteristicData: this.chatType || 1,
      });
      let sendText = {
        sender: this.user.id,
        receiver: this.bid,
        content: JSON.stringify(data),
      };
      _this.socket.send(JSON.stringify(sendText));
      var div = document.getElementById("scoo");
      clearTimeout(time);
      var time = setTimeout(function () {
        div.scrollTop = 9999;
        clearTimeout(time);
      }, 100);
    },
    // 获取商品数据-房源
    async obtainData(id) {
      await this.$getHttp("/mob/home/getHouseInfoDetail", {
        id: id,
      }).then((res) => {
        if (res.tHouseInfo.floor) {
          if (res.tHouseInfo.floor.indexOf("|") != -1) {
            res.tHouseInfo.floor = res.tHouseInfo.floor.split("|")[1] + "层";
          }
        }
        this.HousData = res.tHouseInfo;
      });
    },
    // 获取商品数据-车源
    async obtainData2(id) {
      await this.$getHttp(
        "/api/mobile/vehicleOwner/queryVehicleInformationById",
        {
          vehicleId: id,
          userId: JSON.parse(localStorage.getItem("userInfo")).id,
        }
      ).then((res) => {
        this.HousData = res.vehicleInformation;
      });
    },
    // 获取商品数据-车源服务
    async obtainData3(id) {
      await this.$getHttp("/api/mobile/vehicleOwner/getOwnerServiceById", {
        id: id,
        userId: JSON.parse(localStorage.getItem("userInfo")).id,
      }).then((res) => {
        this.HousData = res.serviceItems;
      });
    },
    // 获取兼职全职数据
    async obtainData4(id) {
      await this.$getHttp("/api/mobile/personnelOwner/getRecruitmentById", {
        id: id,
        userId: JSON.parse(localStorage.getItem("userInfo")).id,
      }).then((res) => {
        this.HousData = res.recommendedPosition;
      });
    },

    details(id) {
      this.openUrl({
        path: "/index/newHouseDetails",
        query: {
          id: id,
        },
      });
    },
  },
};
</script>

<style lang='less'>
.line3 {
  -webkit-line-clamp: 3 !important; //想要的行数
}

.information {
  cursor: pointer;
  width: 250px;
  background-color: #fff;
  display: flex;
  align-items: center;
  border-radius: 10px;
  height: 100px;
  margin-right: 14px;
  color: #000;

  img {
    background-color: #f8f8f8;
    width: 120px;
    height: 80px;
    border-radius: 10px;
    margin-left: 10px;
  }

  .li_1 {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-left: 12px;
    height: 80px;

    .tit {
      width: 75px;
      font-size: 13px;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1; //想要的行数
      -webkit-box-orient: vertical;
      margin-bottom: 10px;
    }

    .jiedao {
      width: 100px;
      font-size: 12px;
      margin-bottom: 7px;
      color: #666666;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1; //想要的行数
      -webkit-box-orient: vertical;

      &.line1 {
        -webkit-line-clamp: 1; //想要的行数
      }

      &.line2 {
        -webkit-line-clamp: 2; //想要的行数
      }
    }

    .shijian {
      bottom: 2px;
      font-size: 13px;
      white-space: nowrap;
      display: flex;
      align-items: center;
      width: 100px;

      .ycyc {
        display: inline-block;
        width: 35px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 12.5px;
      }
    }
  }
}

.information {
  .li-cz {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    vertical-align: top;
    margin-left: 2px;
    height: 80px;

    .tit {
      width: 100px;
      font-size: 13px;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2; //想要的行数
      -webkit-box-orient: vertical;
      margin-bottom: 0;

      &.line1 {
        -webkit-line-clamp: 1;
      }

      &.line2 {
        -webkit-line-clamp: 2;
      }
    }

    .jiedao {
      margin-bottom: 0;
    }
  }
}

// 兼职全职
.vacancy {
  width: 250px;
  background-color: #fff;
  border-radius: 10px;
  min-height: 100px;
  margin-right: 14px;
  padding: 10px;

  .vehicleRecom {
    font-size: 14px;
    font-weight: 550;
    color: #333333;
    line-height: 22px;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; //想要的行数
    -webkit-box-orient: vertical;
  }

  .vacancy_center {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;

    .vacancy_status {
      span {
        font-size: 12px;
        font-weight: 400;
        color: #333333;
      }

      span:nth-child(1) {
        margin-right: 13px;
      }
    }

    .vacancy_price {
      font-size: 13px;
      font-weight: 550;
      color: #e00000;
    }
  }

  .vacancy_biaoq {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;

    .vacancy_label {
      flex: 1;
      height: 24px;
      position: relative;
      overflow: hidden;
      white-space: nowrap;

      .shade {
        position: absolute;
        right: 0;
        top: 0;
        width: 50px;
        height: 24px;
        background: linear-gradient(to right,
            rgba(255, 255, 255, 0),
            rgba(255, 255, 255, 1));
      }

      .label {
        display: inline-block;
        padding: 5px;
        background-color: #f0f0f0;
        margin-right: 5px;
        font-size: 12px;
        font-weight: 400;
        color: #333333;
        border-radius: 2px;
      }

      .label:nth-last-child(1) {
        margin-right: 0px;
      }
    }

    .gend {
      text-align: right;
      width: 41px;
      height: 100%;
      font-size: 12px;
      color: #888888;
    }
  }

  .personalInformation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;

    .personalInformation_left {
      display: flex;
      flex-direction: column;

      .personalInformation_image {
        width: 21px;
        height: 21px;
        border-radius: 21px;
        margin-right: 5px;
      }

      .GR {
        display: flex;
        align-items: center;

        .name {
          font-size: 12px;
          font-weight: 400;
          color: #333333;
        }
      }

      .GS {
        display: flex;
        align-items: center;

        .corporation {
          font-size: 12px;
          font-weight: 400;
          color: #333333;
        }
      }
    }

    .personalInformation_right {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;

      .personalInformation_Time {
        font-size: 12px;
        font-weight: 400;
        color: #888888;
        margin-bottom: 3px;
        text-align: right;
      }

      .personalInformation_distance {
        font-size: 12px;
        font-weight: 400;
        color: #888888;
        text-align: right;
      }
    }
  }
}
</style>
